body{margin: 0}
section{margin: 0;padding:0;}
.logo img{width: 121px;}
header{position: fixed;width: 100%}
.zero{
	display: flex;
	background: rgba(0, 0, 0, 0.7);
	height: 60px;padding: 0 20px;
	flex-wrap: nowrap ;
	justify-content: space-between ;
	align-items:center;
	
}

nav ul li{display: inline-block;padding: 10px;}
nav ul li:hover a{
	
	color:#108ee9;
}
nav ul li:hover{
	border-bottom: 2px solid #108ee9;
}
nav ul li a{text-decoration: none;color:white;transition: 1s}
.phone{display: none;
	list-style: none;
}
.phone li{border-bottom: 2px solid white;width: 30px;margin: 8px 0}
/*导航结束*/

.one{
	height: 600px;
	background: url(../images/topBanner.png) no-repeat;
	display: flex;
	justify-content: space-between ;
	align-items:flex-end;
	padding: 0 20px;
}
.o2{width: 40%;}
.o2 img{width: 100%;}
.o1{align-self:center;color: white;padding-left: 40px;width: 60%}
.o1>h1{font-size:4em}
.o1>.p1{font-size:3em}
.o1>.p2{
	font-size:1.5em;line-height:60px;height: 60px;
	background:#3c6ff1 url(../images/download.png) no-repeat 20px center;
	border-radius: 40px;
	width: 200px;text-align: center;
	padding: 0 30px;
	transition: .8s;
}
.o1>.p2:hover{
	background:#1f52d2 url(../images/download.png) no-repeat 20px center;
}
/*section one 结束*/

.two>h1{
	margin-top: 30px;
	text-align: center;
	font-size: 2em;
}
.two>div,.three>div,.four>div{
	display: flex;height: 450px;
	justify-content: space-around;
	align-items:center;
	flex-wrap:  wrap ;
	text-align: center;
}
.two>div .t1 .p1{font-weight: bold;font-size: 1.3em;margin-top:1.3em;margin-bottom: 0.3em  }
.two>div .t1 .p2{color: #737373;}
/*section two 结束*/
.three{background: #426fe2;color: white;}
.three>h1,.four h1{
	padding-top: 30px;
	text-align: center;
	font-size: 2em;
}
.three>div .t1{width:50%; }
.three>div .t1 .p1{font-size: 1.3em;}
/*section three 结束*/

.four{
   background: url(../images/messagebg.png) repeat;
   color: white;
}
.four>div{
   background: url(../images/messageBall.png) no-repeat center;
   background-size:auto 100%;

}
.four>div>div{width: 33.3%;height: 100%;}
.four .f2{
	background: url(../images/messagePhone.png) no-repeat center top;
  	overflow: hidden;
}

.four .f2>div{width: 100%;padding-top: 80px;overflow: hidden;
	background:url(../images/message1.png) no-repeat center;height: 100%;
    animation: bg 20s linear infinite;

	 }

@keyframes bg{
    0%,25% {background:url(../images/message1.png) no-repeat center;}
    26%,50% {background:url(../images/message2.png) no-repeat center;}
    51%,75% {background:url(../images/message3.png) no-repeat center;}
    76%,100% {background:url(../images/message4.png) no-repeat center;}
}

.four .f1,.four .f3{display: flex;flex-direction: column;height: 100%;
	justify-content: space-around;}
.f1 .f11,.f1 .f12,.f3 .f11,.f3 .f12{height: 130px;width: 100%;}
.four .f1 p{margin-right:95px; }
.four .f3 p{margin-left:95px; }
.f1 .f11{
	background: url(../images/q1.png) no-repeat right bottom;
	animation: bg1 20s -20s linear infinite;
	text-align: right;
	
}
.f1 .f12{
	background: url(../images/q3.png)  no-repeat right bottom;
	animation: bg3 20s -15s linear infinite;
	text-align: right;
}
.f3 .f11{
	background: url(../images/q2.png) no-repeat left bottom;
	animation: bg2 20s -5s linear infinite;
	text-align: left;
}
.f3 .f12{
	background: url(../images/q4.png)  no-repeat left bottom;
	animation: bg4 20s -10s linear infinite;
	text-align: left;
}

.four .pf1{color: #9fa3bd;font-size: 14px;}

@keyframes bg1{
    0%,75% {background:url(../images/q1.png) no-repeat right  bottom;font-size: 1em}  
    76%,100% {background:url(../images/q11.png) no-repeat right  bottom;font-size: 1.2em}
}
@keyframes bg2{
    0%,75% {background:url(../images/q2.png) no-repeat  left bottom;font-size: 1em}  
    76%,100% {background:url(../images/q21.png) no-repeat  left bottom;font-size: 1.2em}
}
@keyframes bg3{
    0%,75% {background:url(../images/q3.png) no-repeat  right bottom;font-size: 1em}  
    76%,100% {background:url(../images/q31.png) no-repeat  right bottom;font-size: 1.2em}
}
@keyframes bg4{
    0%,75% {background:url(../images/q4.png) no-repeat  left bottom;font-size: 1em}  
    76%,100% {background:url(../images/q41.png) no-repeat  left bottom;font-size: 1.2em}
}
/*section four 结束*/
.five{background: #f1f1f1;padding-bottom: 40px; }
.five>h1{font-size: 2em;text-align: center;margin: 0;padding: 30px 0}
.ff{
	display: flex;justify-content: space-around;align-items:center;
	flex-wrap:wrap ;
}
.five .ff>div{
	height: 300px;width:  22%;
	border-radius: 10px;text-align: center;margin: 2px;
}
.ff4{background: white;display: flex; flex-direction: column;justify-content: space-around;}
.five .ff4 img{width:180px;}
.five .ff4 h1,.ff4 p{margin: 0;}
.ff4 p{font-size: 14px;margin-top:2px }
.ff1{
	transition:background 1s, box-shadow 1s;background: white;
}
.ff1:hover {
	background: #108ee9;
	box-shadow: 0 0 10px black;
	color: white;
}
.ff1  span{transition: 1s;}
.ff1:hover span{padding: 10px; border-radius: 20px;border: 1px white solid;}
.fff1{display: flex; flex-direction: column;justify-content: space-around;height: 100%}

.img1{display: none;}
.ff1:hover .img{display: none}
.ff1:hover .img1{display: inline-block;}

/*section five 结束*/
footer{
	background: #2b3139;padding:10px 0;
	color: white;text-align: center;
}
@media screen and (max-width: 767px){
	.phone{display:block;}
	nav{
		display: none;
		position: absolute;
		right:0;top:45px;

	}
	nav ul li{display: block;background: #f1f1f1}
	nav ul li a{color: black}
	nav ul li:hover{background: red;}
	nav ul li:hover a{color:white;}

	/*导航结束*/
	.one{height: 300px;text-align: center}
	.o1{width: 100%;}
	.o2{display: none}
	.o1>h1{font-size:2em}
	.o1>.p1{font-size:1.5em}
	.o1>.p2{width: 160px;margin: 0 auto;}
	/*section one 结束*/
	.two>div,.three>div,.four>div{height: auto}
	.two>div .t1{width:100%; }
	/*section two 结束*/
	.three>div .t1{width:100%; }
	.three>div .t1 .p2 span{display: none}
	/*section three 结束*/
	.four .f2{display: none}
	.four .f1,.four .f3{width: 100%}
	/*section four 结束*/
	.five .ff>div{width: 98%;}
	/*section five 结束*/

}

@media screen and (min-width: 768px) and (max-width:979px ){
	.one{height:400px}
	.o1>h1{font-size:3em}
	.o1>.p1{font-size:2em}
	/*section one 结束*/
	.two>div,.three>div,.four>div{height: auto}
	.two>div .t1{width:50%; }
	/*section two 结束*/
	.four .f2{display: none}
	.four .f1,.four .f3{width: 50%}
	/*section four 结束*/
	.five .ff>div{width: 48%;}
	/*section five 结束*/
	
}